<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 理想视口 -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>京东-33</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 1 引入淘宝flexible -->
  <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function(e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
</head>

<body>
  <!-- https://uksir.gitee.io/docs/Home/youdao.html -->
  <!-- 京东的头部 -->
  <header>
    <a href="#" class="logo"><i></i></a>
    <div class="search"> <input placeholder="100万件超级爆品疯抢" type="text"> </div>
    <a href="#" class="login">登录</a>
  </header>

  <!-- 轮播图 -->
  <div class="slides">
    <ul>
      <li> <a href="#"> <img src="./uploads/l1.jpg" alt=""> </a> </li>
      <!-- <li> <a href="#"> <img src="./uploads/l1.jpg" alt=""> </a> </li> -->
    </ul>
  </div>

  <!-- 导航 -->
  <nav>
    <!-- (a[href="#"]>img[src="./images/nav_$.png"]+p{京东超市})*8 -->
    <a href="#">
      <img src="./images/nav_1.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_2.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_3.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_4.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_5.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_6.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_7.png" alt="">
      <p>京东超市</p>
    </a>
    <a href="#">
      <img src="./images/nav_8.png" alt="">
      <p>京东超市</p>
    </a>
  </nav>

  <!-- 掌上秒杀 -->
  <!-- ctrl j 把代码都放一行 -->
  <!-- ctrl + shift + [ ] -->
  <div class="hand_kill">
    <!-- 标题 -->
    <div class="hand_kill_title">
      <!-- 闹钟 -->
      <span class="clock">⏰</span>
      <!-- 文字提示 -->
      <div class="hand_kill_name">掌上秒杀</div>
      <!-- 时间 -->
      <div class="time">
        <span>0</span>
        <span>5</span>
        <span>:</span>
        <span>0</span>
        <span>0</span>
        <span>:</span>
        <span>0</span>
        <span>0</span>
      </div>
      <!-- 超链接 -->
      <a href="#">更多秒杀 > </a>
    </div>
    <!-- 内容 -->
    <div class="hand_kill_content">
      <a href="#"> <img src="./uploads/seckill_1.jpg" alt=""> <span class="tips">热卖</span>
        <div class="news_prices">￥99</div> <del>￥99.1</del>
      </a>
      <a href="#"> <img src="./uploads/seckill_2.jpg" alt=""> <span class="tips">热卖</span>
        <div class="news_prices">￥99</div> <del>￥99.1</del>
      </a>
      <a href="#"> <img src="./uploads/seckill_3.jpg" alt=""> <span class="tips">热卖</span>
        <div class="news_prices">￥99</div> <del>￥99.1</del>
      </a>
    </div>
  </div>

  <!-- 618 主题日 -->
  <div class="theme_day">
    <!-- 标题 -->
    <div class="theme_day_title">
      <!-- 
        显示图片的方式 2 种 ：
        1 img标签 
          天生 高度 会跟随宽度改变而改变
        2 背景图片 
          div 高度 不会跟随宽度改变而改变

      -->
      <img src="./uploads/banner_bg.jpg" alt="">
      <ul class="clearfix">
        <!-- ctrl + shift + d 往下复制一行 -->
        <li> <a href="#"> <img src="./uploads/banner_1.jpg" alt=""> </a> </li>
        <li> <a href="#"> <img src="./uploads/banner_2.jpg" alt=""> </a> </li>
        <li> <a href="#"> <img src="./uploads/banner_3.jpg" alt=""> </a> </li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="theme_day_content">
      <a href="#"><img src="./uploads/major_1.jpg" alt=""></a>
      <a href="#"><img src="./uploads/major_2.jpg" alt=""></a>
      <a href="#"><img src="./uploads/major_3.jpg" alt=""></a>
      <a href="#"><img src="./uploads/major_4.jpg" alt=""></a>
      <a href="#"><img src="./uploads/major_5.jpg" alt=""></a>
      <a href="#"><img src="./uploads/major_6.jpg" alt=""></a>
      <a href="#"><img src="./uploads/major_7.jpg" alt=""></a>
    </div>
  </div>
  <!-- 广告 -->
  <a href="#" class="adv"><img src="./uploads/advert_1.jpg" alt=""></a>

  <!-- 特色超市 goods_title -->
  <div class="market">
    <div class="market_title goods_title">
      特色超市
    </div>
    <div class="market_content clearfix">
      <a href="#"><img src="./uploads/market_1.jpg" alt=""></a>
      <a href="#"><img src="./uploads/market_2.jpg" alt=""></a>
      <a href="#"><img src="./uploads/market_3.jpg" alt=""></a>
      <a href="#"><img src="./uploads/market_4.jpg" alt=""></a>
      <a href="#"><img src="./uploads/market_5.jpg" alt=""></a>
    </div>
  </div>


    <!-- 广告 -->
    <a href="#" class="adv"><img src="./uploads/advert_2.jpg" alt=""></a>

    <!-- 主题街 -->
    <div class="theme_stree">
      <div class="theme_stree_title goods_title">主题街</div>
      <div class="theme_stree_content clearfix">
        <a href="#"><img src="./uploads/theme_1.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_2.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_3.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_4.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_5.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_6.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_7.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_8.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_9.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_10.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_11.jpg" alt=""></a>
        <a href="#"><img src="./uploads/theme_12.jpg" alt=""></a>
      </div>

    </div>
     <!-- 广告 -->
     <a href="#" class="adv"><img src="./uploads/advert_3.jpg" alt=""></a>

     <!-- 品牌推荐 4 3 3  -->
     <div class="recommend">
       <div class="recommend_title goods_title">品牌推荐</div>
       <div class="recommend_content">
         <a href="#"><img src="./uploads/brand_1.jpg" alt=""></a>
         <a href="#"><img src="./uploads/brand_2.jpg" alt=""></a>
         <a href="#"><img src="./uploads/brand_3.jpg" alt=""></a>
       </div>
     </div>

          <!-- 广告 -->
          <a href="#" class="adv"><img src="./uploads/advert_4.jpg" alt=""></a>

          <!-- 猜你喜欢 -->
          <div class="guess">
            <div class="guess_title goods_title">
                <span>猜你喜欢</span>
                <a href="#">
                  <img src="./images/icon-login.png" alt="">
                  登录后更懂你</a>
            </div>
            <div class="guess_content">
          
              <ul>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_1.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_2.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_3.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_4.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_5.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_6.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_7.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_8.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_9.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
                  <li> <!-- 价格 --> <div class="goods_prices"> <span>￥99</span> <a href="#">看相似</a> </div> <!-- 详情 --> <a href="#" class="goods_info"> <img src="./uploads/item_10.jpg" alt=""> <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p> </a> </li>
              </ul>
            </div>
          </div>

          <!-- 底部工具栏 -->
          <div class="btm_tool">
            <!-- 加载更多 -->
            <a href="#" class="more">点击加载更多</a>
            <!-- 注册 -->
            <div class="register">
              <a href="#">登录</a>
              <a href="#">注册</a>
              <a href="#">反馈</a>
              <a href="#">回到顶部</a>
            </div>
            <!-- 设备 -->
            <div class="devices">
              <a href="#"> <span></span> <p>客户端</p> </a>
              <a href="#"> <span></span> <p>客户端</p> </a>
              <a href="#"> <span></span> <p>客户端</p> </a>
            </div>
            <!-- 版权所有 -->
            <div class="copy_right">
                Copyright © 2004-2016京东JD.com版权.所有
            </div>
          </div>

          <footer>
            <a href="#"><img src="./images/index-icon.png" alt=""></a>
            <a href="#"><img src="./images/sort-icon.png" alt=""></a>
            <a href="#"><img src="./images/618-icon.png" alt=""></a>
            <a href="#"><img src="./images/cart-icon.png" alt=""></a>
            <a href="#"><img src="./images/center-icon.png" alt=""></a>
          </footer>
  
</body>

</html>